import { SimpleChanges } from '@angular/core';
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { EditorConfig } from '../model/editor-config';
declare const $: any;
declare const editormd: any;
@Component({
  selector: 'widget-editor-md',
  templateUrl: './editor-md.component.html',
  styleUrls: ['./editor-md.component.scss']
})
export class EditorMdComponent implements OnInit, OnChanges {
    @Input()
    markdown: any = '';
    @Input()
    mode: number = 2; // 1 编辑, 2 视图
    @Output()
    markdownChange = new EventEmitter<any>();

    private _md: any = '';
    private _editor: any;
    private _conf = new EditorConfig();

    constructor(
        private _el: ElementRef,
    ) { }

    ngOnInit(): void {
        document.querySelector('#loading_div')?.setAttribute('style', 'display:none');
        // this.readmd();
        this._el.nativeElement.querySelector('#markdowndiv').setAttribute('style', 'height:calc(100vh - 55px);');
    }

    ngOnChanges(changes: SimpleChanges): void {
        this._md = this.markdown;
        if (changes.markdown) {
            this.createEditor();
            return;
        }
        if (changes.mode) {
            this.createEditor();
            return;
        }
    }

    savemd() {
        if (this.mode === 1) {
            //更新缓存中的
            this._md = this._editor.getMarkdown();
            // 更新外部交互
            this.markdown = this._md;
            this.markdownChange.next(this.markdown);
        }
    }

    private createEditor() {
        const point = this;
        let count = 0;
        const job = setInterval(() => {
            count++;
            if (count >= 100) {
                clearInterval(job);
                console.dir('任务超时');
                return;
            }
            const node = point._el.nativeElement.querySelector('#markdown');
            if (node) {
                clearInterval(job);
                point.initElement(node);
                if (point._md) {
                    point._conf.markdown = point._md;
                } else {
                    point._conf.markdown = point._conf.omarkdown;
                }
                if (point.mode === 1) {
                    point._editor = editormd('markdown', point._conf);
                    //解决右侧偶尔出不来的bug
                    count = 0;
                    const job1 = setInterval(() => {
                        count++;
                        if (count >= 100) {
                            clearInterval(job1);
                            console.dir('任务超时');
                            return;
                        }
                        if (point._editor && point._editor.watch) {
                            point._editor.watch();
                        } else {
                            return;
                        }
                        if (point._el.nativeElement.querySelector('.editormd-preview-container')) {
                            clearInterval(job1);
                            point._editor.watch();
                            return;
                        }
                    }, 50);
                } else {
                    point._editor = editormd.markdownToHTML('markdown', point._conf);
                }
            }
        }, 50);
    }

    private initElement(node: Element) {
        const parentNode = node.parentNode;
        if (parentNode == null) {
            return;
        }
        parentNode.removeChild(node);
        node = document.createElement('div');
        const textarea = document.createElement('textarea');
        node.setAttribute('id', 'markdown');
        node.appendChild(textarea);
        parentNode.appendChild(node);
    }
}
